<template>
  <view>
    <nav-bar title="课程库" :showLeftIcon="false"></nav-bar>
    <you-tabs
      :activeName="tabActive"
      :tabsList="tabsList"
      @tabClick="clickTabItem"
    ></you-tabs>
    <you-scroll
      :loadingHeight="loadingHeight"
      :mainHeight="scrollHeight"
      :isAllData="isAllData"
      :isRequestSuccess="isRequestSuccess"
      @onRefresh="onRefresh"
      @loadMore="loadMore"
    >
      <template>
        <view class="tip" v-if="tabActive === 4">
          <image class="img" :src="baseIconUrl + '/userIcon/icon_tip.png'" mode="aspectFill"/>
          <text class="word">更多课程为VIP用户侧弯特定矫正训练，需在治疗师指导下完成！</text>
        </view>
        <view v-if="isLoading" class="common-loading">
          <image class="loading-img" :src="baseIconUrl + '/commonIcon/icon_loading.png'" />
          正在加载数据，请稍后......
        </view>
        <view
          class="common-no-data"
          v-else-if="!videoList || videoList.length === 0"
        >
          <image class="no-data-img" :src="baseIconUrl + '/commonIcon/icon_no_data.png'" />
          <view class="text">暂无课程~</view>
        </view>
        <view v-else class="collect-list">
          <view
            v-for="(item, index) in videoList" 
            :key="index"
            @click="vipClick(item)"
          >
            <view class="content-box">
              <view class="left-box">
                <!-- <video
                  :id="'videoId'+ index"
                  style="width: 100%; height: 100%;background-size: cover;"
                  class="video"
                  :src="item.videoUrl"
                  :show-play-btn="false"
                  :show-fullscreen-btn="false"
                  :show-center-play-btn="false"
                  :controls="true"
                  @click="vipClick(item)"
                ></video> -->
                <image
                  class="video-img"
                  :src="item.coverUrl || baseImgUrl + '/commonImg/img_common_video.jpg'"
                  mode="aspect"
                />
              <view class="status-box" :style="{ background: statusConfig[item.vipType].bgColor}">
                  {{ statusConfig[item.vipType].text || statusConfig['default'].text  }}
              </view>
              </view>
              <view class="right-box">
                <view class="name">{{ item.title }}</view>
              </view>
            </view>
          </view>
        </view>
      </template>
    </you-scroll>
    <!-- 会员弹框 -->
    <you-popup
      :popupVisible="popupVisible"
      @popupClose="popupVisible = false"
      :showTitle="false"
      :showBtn="false"
      bgColor="transparent"
    >
    <view slot="popupContent">
      <!-- 标题 -->
      <view class="popup-img">
      <image class="pic-img" :src="baseImgUrl + '/userImg/img_video_bg.png'" mode="aspectFit"/>
      <view class="contain-text">
        <text>{{ popupContent }}</text>
      </view>  
    </view>
      <view class="popup-btn">
        <view class="cancel-btn" @click="clickCancel">取消</view>
        <view class="activate-btn" @click="clickActivate">去开通</view>
      </view>
    </view>
  </you-popup>
    <view class="custom-service" @click="clickCustom">
      <image
        class="custom-img"
        :src="baseIconUrl + '/commonIcon/icon_custom_service.png'"
        mode="aspectToFill"
      />
    </view>
    <tab-bar :selectedIndex="1"></tab-bar>
  </view>
</template>

<script>
  import api_video from '@/api/user.js'
  import { baseUrl, baseImgUrl, baseIconUrl } from '@/config'
  export default {
    name: "VideoList",
    data() {
      return {
        baseUrl,
        baseImgUrl,
        baseIconUrl,
        tabActive: 1,
        tabsList: [
          { label: "灵活性拉伸", name: 1 },
          { label: "强化肌肉核心", name: 2 },
          { label: "ADL姿势改善", name: 3 },
          { label: "侧弯矫正训练", name: 4 },
        ],
        loadingHeight: "",
        scrollHeight: "",
        isAllData: false,
        isRequestSuccess: false,
        isLoading: false,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        videoList: [],
        popupVisible: false,
        playIndex: 0,
        statusConfig: {
          '0': { text: '免费', bgColor: '#00C6C5' },
          '1': { text: '会员专享', bgColor: 'linear-gradient(146.01deg, #FF4E08 0%, #FF974D 100%)' },
          '2': { text: 'vip定制', bgColor: 'linear-gradient(146.01deg, #FF4E08 0%, #FF974D 100%)' },
          'default': { text: '--', bgColor: '' }
        },
        isMember:'',
        isVipmember:'',
        popupContent:'',
        chooseVipType: ''
      }
    },
    onShow() {
      uni.hideTabBar()
      this.scrollHeight = this.$store.getters.heightData.mainHeight -48 + 'px'
      this.loadingHeight = this.$store.getters.heightData.mainHeight - 68 + 'px'
      this.isMember = uni.getStorageSync('allUserInfo').isMember
      this.isVipmember = uni.getStorageSync('allUserInfo').isVipmember
      this.getInitList()
    },
    methods: {
      getInitList() {
        if (uni.getStorageSync('saveVideoList')) { // 如果缓存中有list数据，代表是从详情返回的
          this.pageNum = uni.getStorageSync('videoPageNum')
          this.videoList = uni.getStorageSync('saveVideoList')
        } else {
          this.pageNum = 1
          this.videoList = []
          this.getVideoList()
        }
      },
      clickTabItem(value) {
        this.tabActive = value
        this.pageNum = 1
        this.videoList = []
        this.getVideoList()
      },
      getVideoList() {
        const params = {
          videoClass: this.tabActive,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        api_video.videoList(params).then(res => {
          const result = res.rows
          result.forEach(item => {
            item.coverUrl = item.coverUrl ? item.coverUrl.includes('http') ? item.coverUrl : this.baseUrl + item.coverUrl : ''
          })
          this.videoList.push(...result)
          this.total = res.total
          this.isRequestSuccess = true
          this.isLoading = false
         })
      },
      // 下拉刷新
      onRefresh() {
        this.pageNum = 1
        this.videoList = []
        this.isAllData = false
        this.isRequestSuccess = false
        this.getVideoList()
      },
      // 上拉加载
      loadMore() {
        if (this.videoList.length < this.total) {
          this.pageNum++
          this.isAllData = false
          this.isRequestSuccess = false
          this.getVideoList()
        } else {
          this.isAllData = true
        }
      },
      // 课程库点击会员课程弹出弹框
      vipClick(item) {
        // 定制会员用户
        if(this.isVipmember === 2){
          uni.setStorageSync('videoPageNum', this.pageNum)
          uni.setStorageSync('saveVideoList', this.videoList)
          uni.navigateTo({
            url: `/subPages/userIndex/videoLibrary/videoDetail?title=${item.title}&id=${item.id}`
          })
          return
        }
        
        // 会员用户看定制vip会员
        if (this.isMember === 2 && item.vipType === '2'){
          this.chooseVipType = '2'
          this.popupContent = 'VIP定制尊享高清课程，开通VIP定制会员即可解锁全部内容！'
          this.popupVisible = true
          return
        }
        // 会员用户看非定制vip会员
        if (this.isMember === 2 && item.vipType !== '2') {
          uni.setStorageSync('videoPageNum', this.pageNum)
          uni.setStorageSync('saveVideoList', this.videoList)
          uni.navigateTo({
            url: `/subPages/userIndex/videoLibrary/videoDetail?title=${item.title}&id=${item.id}`
          })
          return
        }

        // 普通用户看普通课程
        if (item.vipType === '0') {
          uni.setStorageSync('videoPageNum', this.pageNum)
          uni.setStorageSync('saveVideoList', this.videoList)
          uni.navigateTo({
            url: `/subPages/userIndex/videoLibrary/videoDetail?title=${item.title}&id=${item.id}`
          })
        } else {
          this.chooseVipType = item.vipType
          // 普通用户看会员课程
          this.popupContent = item.vipType === '2' ?
            'VIP定制尊享高清课程，开通VIP定制会员即可解锁全部内容！'
            : 'VIP尊享高清课程，开通会员即可解锁全部内容！'
          this.popupVisible = true
        }
      },
      // 取消
      clickCancel() {
        this.popupVisible = false
      },
      // 开通会员
      clickActivate() {
        uni.setStorageSync('saveVideoList', null)
        uni.setStorageSync('videoPageNum', 1)
        if (this.chooseVipType === '2') {
          uni.navigateTo({
            url: "/subPages/userIndex/memberCenter/activateMember?activeCard=2"
          })
        }
        if (this.chooseVipType === '1') {
          uni.navigateTo({
            url: "/subPages/userIndex/memberCenter/activateMember?activeCard=1"
          })
        }
        this.popupVisible = false
      },
      clickCustom() {
        uni.setStorageSync('saveVideoList', null)
        uni.setStorageSync('videoPageNum', 1)
        uni.navigateTo({ url: '/subPages/userIndex/freeScreening/index?title=在线客服' })
      }
    }
  }
</script>
<style lang="scss">
  .content-box {
    display: flex;
    padding: 24rpx 30rpx;
    // border-radius: 16rpx;
    background-color: #FFF;
    .left-box {
      position: relative;
      width: 288rpx;
      height: 192rpx;
      margin-right: 20rpx;
      border-radius: 16rpx;
      // background-color: #ffbdbd;
      overflow: hidden;
      //播放按钮
      video::-webkit-media-controls-play-button {
        display: none;
      }
      .prism-big-play-btn {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 48%;
        width: 60rpx;
        height: 60rpx;
        // background: url(var(--url) + 'icon_music_play.png') no-repeat;
        background-size: contain;
        cursor: pointer;
        .outter {
          border: 7px solid rgba(255, 255, 255, 0.51);
          border-radius: 100%;
          width: 60rpx;
          height: 60rpx;
          position: absolute;
          box-sizing: border-box;
          top: 0;
          left: 0;
        }
        .outter:hover {
          content: "";
          width: 80px;
          height: 80px;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -40px;
          margin-top: -40px;
          border-radius: 50%;
          //a1为经过@keyframes 规则建立的动画名称，可本身定义web
          // a2 为动画时常 ，例如：1s   2s   可自行规定浏览器
          // a3 为css自带的动画效果，有以下几个：
          // 类名称+持续时间+（变化方式,延迟时间，重复次数（infinite循环），重复方式，开始结束的状态）
          animation: warn 1s ease-out 0s infinite;
        }
        // 在warn方法里,用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
        // 0% 是动画的开始，100% 是动画的完成，建议使用百分比，会更加详细：
        @keyframes warn {
          0% {
            // transform: scale表示缩放，值表示倍数，可以指定X/Y轴
            transform: scale(0.5);
            opacity: 1;
          }

          30% {
            opacity: 1;
          }

          100% {
            transform: scale(1.4);
            opacity: 0;
          }
        }
      }
      .status-box {
        position: absolute;
        left: 0;
        top: 0;
        height: 40rpx;
        padding: 0 14rpx;
        border-radius: 16rpx 0 16rpx 0;
        line-height: 40rpx;
        font-size: 20rpx;
        color: #FFF;
      }
      .member-box {
        background: linear-gradient(146.01deg, #FF4E08 0%, #FF974D 100%);
      }
      .video-img {
        // width: 100%;
        // height: 100%;
        width: 288rpx;
        height: 192rpx;
      }
    }
    .right-box {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      padding: 16rpx 0;
      .name {
        font-size: 32rpx;
        font-weight: 500;
      }
      .time {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  .popup-img{
    position: relative;
    .pic-img{
      width: 100%;
      // height: 320rpx;
    }
    .contain-text{
      position: absolute;
      width: 460rpx;
      font-size: 36rpx;
      font-weight: 600;
      color:#333;
      top: 95rpx;
      left: 70rpx;
    }
  }
  .popup-btn{
    display: flex;
    font-size: 32rpx;
    position: absolute;
    bottom: 60rpx;
    left: 50rpx;
    .cancel-btn{
      width: 240rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      border-radius: 8rpx;
      background: #FFF5DA;
      color: #C7AD67;
    }
    .activate-btn{
      width: 240rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      border-radius: 8rpx;
      background: linear-gradient(90deg, #474655 0%, #0F0E13 100%);
      color: #F5DC9A;
      margin-left: 20rpx;
    }
  }
  .tip {
    display: flex;
    align-items: center;
    padding: 20rpx 0 20rpx 0;
    color: #fc8001;
    .img {
      width: 40rpx;
      height: 40rpx;
    }
    .word {
      font-size: 28rpx;
      margin-left: 10rpx;
    }
  }
  .custom-service {
    width: 96rpx;
    height: 96rpx;
    position: fixed;
    bottom: 270rpx;
    right: 16rpx;
    z-index: 9999;
    .custom-img {
      width: 100%;
      height: 100%;
    }
  }
</style>